<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}" rel="stylesheet"/>
<link th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>
<body class="gray-bg">
<div class="ui-layout-west">
    <div class="main-content">
        <div class="box box-main" style="width: 3000px">
            <div class="box-header">
                <div class="box-title">
                    <i class="fa icon-grid"></i> 终端列表
                </div>
                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;">
                        <i class="fa fa-chevron-up"></i></button>
                    <button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠">
                        <i class="fa fa-chevron-down"></i></button>
                    <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新">
                        <i class="fa fa-refresh"></i></button>
                </div>
            </div>
            <div class="ui-layout-content">
                <div id="tree" class="ztree" style="overflow: auto"></div>
            </div>
        </div>
    </div>
</div>
<div class="container-div ui-layout-center">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <input type="hidden" id="deptId" name="deptId">
                <div class="select-list">
                    <ul>
                        <li>
                            安装人员：<input type="text" name="installer"/>
                        </li>

<!--                        <li>-->
<!--                            存放编号查询：<input type="text" id="deptId" name="deptId"/>-->
<!--                        </li>-->
                        <!--<li>
                            设备地址：<input type="text" name="address"/>
                        </li>
                        <li>
                            运行状态：
                       <select name="statue" th:with="type=${@dict.getType('sys_normal_disable')}">
                        <option value="">所有</option>
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                        </select>
                    </li>
                        <li>
                            广播内容：<input type="text" name="details"/>
                        </li>
                        <li>
                            <input class="laydate-icon  layer-date"
                                        name="runtime"
                                        id="runtime"
                                        value=""
                                        readonly="readonly"
                                        style="width:120px;"
                                        placeholder="运行时间"
                                        title="运行时间"/>
                        </li>-->

                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm hidden-xs" id="toolbar" role="group">
            <a class="btn btn-primary btn-edit disabled" onclick="$.operate.edit()" shiro:hasPermission="iot:broadinfo:edit">
                <i class="fa fa-edit"></i> 修改
            </a>
            <a class="btn btn-danger btn-del disabled" onclick="$.operate.removeAll()" shiro:hasPermission="iot:broadinfo:remove">
                <i class="fa fa-remove"></i> 删除
            </a>
            <a class="btn btn-info" onclick="$.table.importExcel()" shiro:hasPermission="system:fireinfo:import">
                <i class="fa fa-upload"></i> 导入
            </a>
            <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="iot:broadinfo:export">
                <i class="fa fa-download"></i> 导出
            </a>
            <!--<a class="btn btn-success" onclick="$.operate.exportExcelBySingle()" shiro:hasPermission="system:user:add">
                <i class="fa fa-plus"></i> 导出-->
            </a>
        </div>

        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table" data-mobile-responsive="true"></table>
        </div>
    </div>
</div>
<div th:include="include :: footer"></div>
<script th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script>
<script th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>
<script th:inline="javascript">
    // var editFlag = [[${@permission.hasPermi('iot:broadinfo:edit')}]];
    // var removeFlag = [[${@permission.hasPermi('iot:broadinfo:remove')}]];
    // var datas = [[${@dict.getType('sys_normal_disable')}]];
    var prefix = ctx + "iot/secpannel";
    var aid1 = "";
    $(function() {
        $('body').layout({ west__size: 185 });
        queryAreaList();
        queryAreaTree();
    });
    function queryAreaList() {
        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            //exportBySingleUrl: prefix + "/exportbysingle",
            sortName: "id",
            modalName: "安防数据",
            search: false,
            showExport: true,
            columns: [
                {
                    checkbox: true
                },
                {
                    field: 'id',
                    title: '序号',
                },
                {
                    field: 'stype',
                    title: '安防类型',
                    sortable: true
                },
                {
                    field: 'deptName',
                    title: '存放地址',
                    sortable: true
                },
                {
                    field: 'sno',
                    title: '设备编号',
                    sortable: true
                },
                {
                    field: 'sname',
                    title: '设备名称',
                    sortable: true
                },
                {
                    field: 'producer',
                    title: '生产公司',
                    sortable: true
                },
                {
                    field: 'prodtime',
                    title: '出厂日期',
                    sortable: true
                },
                {
                    field: 'price',
                    title: '采购价格',
                    sortable: true
                },
                {
                    field: 'endtime',
                    title: '有效日期',
                    sortable:false
                },
                {
                    field: 'installtime',
                    title: '安装时间',
                    sortable: true
                },
                {
                    field: 'installer',
                    title: '安装人员',
                    sortable: true
                },
                {
                    field: 'demo',
                    title: '备注',
                    sortable: false
                },
                {
                    field: 'delflag',
                    title: '是否有效',
                    sortable: false
                },
            ]//警报类型的字段类型之前是text，不匹配，修改为varchar
        };
        $.table.init(options);
    };
    function queryAreaTree(){
        var url = ctx + "system/dept/treeData";
        var options = {
            url: url,
            onClick : zOnClick
        };
        $.tree.init(options);

        function zOnClick(event, treeId, treeNode) {
            //aid1 = treeNode.id;
            $("#deptId").val(treeNode.id);
            $.table.search();
        }
        $.tree.init(options);
    }
    $('#form-group11').on('change', function (e) {
        $("#form-group1").attr("name",$("#form-group11").val())
    });
    $('#form-group22').on('change', function (e) {
        $("#form-group2").attr("name",$("#form-group22").val())
    });
    $('#form-group33').on('select2:select', function (e) {
        $("#form-group3").attr("name",$("#form-group33").val())
    });
    $('#form-group44').on('change', function (e) {
        $("#form-group4").attr("value",$("#form-group44").val());
    });
</script>
<script th:src="@{/js/plugins/layer/laydate/laydate.js}"></script>
<script th:src="@{/js/plugins/layer/layui-v2.4.5/layui/layui.js}"></script>
<script>
    laydate({
        elem:"#runtime",
        event:"focus"
    });
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem:"#secpannel",
            type: 'time',
        });
    });
</script>
</body>
</html>

<!--<!DOCTYPE HTML>-->
<!--<html lang="zh" xmlns:th="http://www.thymeleaf.org"-->
<!--      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">-->
<!--<meta charset="utf-8">-->
<!--<head th:include="include :: header">-->
<!--</head>-->
<!--<link th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}" rel="stylesheet"/>-->
<!--<link th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>-->
<!--<script th:src="@{/js/views/bSecpannel.js}"></script>-->
<!--<body class="gray-bg">-->
<!--<div class="ui-layout-west">-->
<!--    <div class="main-content">-->
<!--        <div class="box box-main">-->
<!--            <div class="box-header">-->
<!--                <div class="box-title">-->
<!--                    <i class="fa icon-grid"></i> 区域选择-->
<!--                </div>-->
<!--                <div class="box-tools pull-right">-->
<!--                    <button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i class="fa fa-chevron-up"></i></button>-->
<!--                    <button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i class="fa fa-chevron-down"></i></button>-->
<!--                    <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新部门"><i class="fa fa-refresh"></i></button>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="ui-layout-content">-->
<!--                <div id="tree" class="ztree"></div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->
<!--<div class="ui-layout-center">-->
<!--    <div class="container-div">-->
<!--        <div class="row">-->
<!--            <div class="col-sm-12 search-collapse">-->
<!--                <form id="formId">-->
<!--                    <div class="select-list">-->
<!--                        <ul>-->
                            <li>
                                安装人员：<input type="text" name="installer"/>
                            </li>
<!--                            <li>-->
<!--                                地址编号: <input type="text" name="dept_id"/>-->
<!--                            </li>-->
<!--                            <li class="select-time">-->
<!--                                <input type="text" class="time-input" id="prodtime"  placeholder="出厂日期" name="prodtime"/>-->
<!--                            </li>-->
<!--                            <li class="select-time">-->
<!--                                <input type="text" class="time-input" id="endtime"  placeholder="有效日期" name="endtime"/>-->
<!--                            </li>-->
<!--                            <li class="select-time">-->
<!--                                <input type="text" class="time-input" id="installtime"  placeholder="安装时间" name="installtime"/>-->
<!--                            </li>-->
<!--                            <li>-->
<!--                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>-->
<!--                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>-->
<!--                            </li>-->
<!--                        </ul>-->
<!--                    </div>-->
<!--                </form>-->
<!--            </div>-->
<!--            <div class="col-sm-12 select-table table-striped">-->
<!--                <div class="ibox float-e-margins">-->
<!--                    <div class="ibox-content">-->
<!--                        <h3>安防信息记录 </h3>-->
<!--                        <table id="bootstrap-table" data-mobile-responsive="true"></table>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->
<!--<div th:include="include :: footer"></div>-->
<!--<script th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script>-->
<!--<script th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>-->
<!--<script th:inline="javascript">-->
<!--    var prefix = ctx + "iot/secpannel";-->
<!--    $(function() {-->
<!--        $('body').layout({ west__size: 185 });-->
<!--        select();-->
<!--        queryAreaTree();-->
<!--    });-->
<!--    //分页查询-->
<!--    function select() {-->
<!--        var options = {-->
<!--            url: prefix + "/list",-->
<!--            sortName: "id",-->
<!--            modalName: "安防数据",-->
<!--            search: false,-->
<!--            showExport: true,-->
<!--            columns: [-->
<!--                {-->
<!--                    checkbox: true-->
<!--                },-->
<!--                {-->
<!--                    field: 'id',-->
<!--                    title: '序号',-->
<!--                    visible: true-->
<!--                },-->
<!--                {-->
<!--                    field: 'stype',-->
<!--                    title: '安防类型',-->
<!--                    sortable: true-->
<!--                },-->
<!--                {-->
<!--                    field: 'deptName',-->
<!--                    title: '存放地址',-->
<!--                    sortable: true-->
<!--                },-->
<!--                {-->
<!--                    field: 'sno',-->
<!--                    title: '设备编号',-->
<!--                    sortable: true-->
<!--                },-->
<!--                {-->
<!--                    field: 'sname',-->
<!--                    title: '设备名称',-->
<!--                    sortable: true-->
<!--                },-->
<!--                {-->
<!--                    field: 'producer',-->
<!--                    title: '生产公司',-->
<!--                    sortable: true-->
<!--                },-->
<!--                {-->
<!--                    field: 'prodtime',-->
<!--                    title: '出厂日期',-->
<!--                    sortable: true-->
<!--                },-->
<!--                {-->
<!--                    field: 'price',-->
<!--                    title: '采购价格',-->
<!--                    sortable: true-->
<!--                },-->
<!--                {-->
<!--                    field: 'endtime',-->
<!--                    title: '有效日期',-->
<!--                    sortable:false-->
<!--                },-->
<!--                {-->
<!--                    field: 'installtime',-->
<!--                    title: '安装时间',-->
<!--                    sortable: true-->
<!--                },-->
<!--                {-->
<!--                    field: 'installer',-->
<!--                    title: '安装人员',-->
<!--                    sortable: true-->
<!--                },-->
<!--                {-->
<!--                    field: 'demo',-->
<!--                    title: '备注',-->
<!--                    sortable: false-->
<!--                },-->
<!--                {-->
<!--                    field: 'delflag',-->
<!--                    title: '是否有效',-->
<!--                    sortable: false-->
<!--                },-->
<!--            ]//警报类型的字段类型之前是text，不匹配，修改为varchar-->
<!--        };-->
<!--        $.table.init(options);-->
<!--    };-->
<!--    function queryAreaTree(){-->
<!--        var url = ctx + "system/dept/treeData";-->
<!--        var options = {-->
<!--            url: url,-->
<!--            onClick : zOnClick-->
<!--        };-->
<!--        $.tree.init(options);-->

<!--        function zOnClick(event, treeId, treeNode) {-->
<!--            // $("#deptId").val(treeNode.id);-->
<!--            // $("#parentId").val(treeNode.pId)-->
<!--            $("#deptId").val(treeNode.id);-->
<!--            $.table.search();-->
<!--        }-->
<!--        $.tree.init(options);-->
<!--    }-->
<!--    $('#form-group11').on('change', function (e) {-->
<!--        $("#form-group1").attr("name",$("#form-group11").val())-->
<!--    });-->
<!--    $('#form-group22').on('change', function (e) {-->
<!--        $("#form-group2").attr("name",$("#form-group22").val())-->
<!--    });-->
<!--    $('#form-group33').on('select2:select', function (e) {-->
<!--        $("#form-group3").attr("name",$("#form-group33").val())-->
<!--    });-->
<!--    $('#form-group44').on('change', function (e) {-->
<!--        $("#form-group4").attr("value",$("#form-group44").val());-->
<!--    });-->

<!--</script>-->
<!--<script th:src="@{/js/plugins/layer/laydate/laydate.js}"></script>-->
<!--<script th:src="@{/js/plugins/layer/layui-v2.4.5/layui/layui.js}"></script>-->
<!--<script>-->
<!--    laydate({-->
<!--        elem:"#runtime",-->
<!--        event:"focus"-->
<!--    });-->
<!--    layui.use('laydate', function(){-->
<!--        var laydate = layui.laydate;-->
<!--        //执行一个laydate实例-->
<!--        laydate.render({-->
<!--            elem:"#secpannel",-->
<!--            type: 'time',-->
<!--        });-->
<!--    });-->
<!--</script>-->

<!--</body>-->
<!--</html>-->